<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/plugins/ztree/zTreeStyle/zTreeStyle.css">
    <script src="js/jquery/jquery.js"></script>
    <script src="js/plugins/ztree/jquery.ztree.core-3.4.js"></script>

    <script>
        var setting = {
            data: {
                simpleData: {
                    enable: true
                }
            }
        };

        var zNodes = [
            {id: 1, pId: 0, name: "业务模块", open: true},
            {id: 11, pId: 1, name: "商品管理"},
            {id: 12, pId: 1, name: "订单管理"},
            {id: 2, pId: 0, name: "系统模块", open: true},
            {id: 21, pId: 2, name: "部门管理"},
            {id: 22, pId: 2, name: "员工管理"},
            {id: 23, pId: 2, name: "角色管理"},
            {id: 24, pId: 2, name: "权限管理"},
            {id: 25, pId: 2, name: "系统菜单管理"},
            {id: 3, pId: 0, name: "报表模块", open: true},
            {id: 31, pId: 3, name: "订货报表"},
            {id: 32, pId: 3, name: "销售报表"}

        ];

        $(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });
    </script>
</head>
<body>
<ul id="treeDemo" class="ztree"></ul>
</body>
</html>